<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>边框</title>
		<style type="text/css">
			
			/*三角形的画法
			 	1.三角形的方向，假设三角形朝上，要用到底边
			 	2.量宽度，三角形的高，三角形的底边的一半
			 	3.将三角形腰的两条边设置为透明颜色
			 * 
			 * 
			 * */
			.box{
				width:0px;
				height: 0px;
				border-left:50px solid transparent;
				border-right:50px solid transparent;
				border-bottom:50px solid #FF0000;
				
			}
			/*颜色 
			 1. 16进制写法  #FF0000 === #f00 #ccc #fff
			 2.英文单词（透明颜色transparent）
			 3.rgb（255，0，0）
			 4.rgba（）	a代表透明度， 0~1
			 * */
			
			.box2{
				width:200px;
				height:100px;
				border:4px solid red;
				/*border-top-style:dashed;*/
				border-radius:54px;
				border-top-left-radius: 142px;
			}
			/*
			 solid 		实线
			 dotted 	圆点
			 dashed  	虚线
			 double 	双实线
			 groove 	带层次的边框 	
			 
			 */
			
			
			.bubble div{
				width:150px;
				height:70px;
				background-color:#3EC22E;
				border-radius: 8px;
			}
			.bubble::after{
				content:"";
				width: 0px;
				margin-left: 20px;
				display: block;
				border-top:10px solid #3EC22E;
				border-left:10px solid transparent;
				border-right:10px solid transparent;
			}
			</style>
	</head>
	<body>
		<div class="box"></div>
		
		<div class="box2"></div>
		
		<!--对话框 气泡-->
		<div class="bubble">
			<div>HAHA</div>
		</div>
				
	
	</body>
</html>
